import React from "react";
import {
  Form,
  Table,
  Icon,
  Tag,
  Modal,
  Steps,
  Button,
  message,
  Input,
  Row,
  Col,
  Select,
  DatePicker,
  InputNumber,
  Dropdown,
  Menu
} from "antd";
import { DropOption } from "components";
import moment from "moment";
const Step = Steps.Step;
const confirm = Modal.confirm;
const FormItem = Form.Item;
const Option = Select.Option;

class ModalSelect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 0,
      value: "",
      bottons: "查看",
      previewVisible: false,
      imgurl: ""
    };
  }
  show() {
    const { showList } = this.props;
    showList();
  }
  bottonClick(i) {
    if (document.getElementById(i).style.display != "block") {
      document.getElementById(i).style.display = "block";
    } else {
      document.getElementById(i).style.display = "none";
    }
    if (this.state.bottons == "查看") {
      this.setState({ bottons: "隐藏" });
    } else {
      this.setState({ bottons: "查看" });
    }
  }
  imgClick = e => {
    this.setState({ previewVisible: true, imgurl: e.target.src });
  };
  handleCancel = () => {
    this.setState({ previewVisible: false });
  };
  render() {
    const { info } = this.props;
    const { previewVisible, imgurl } = this.state;
    var list = [];
    var photoPage = [];

    if(info!= undefined || info!= ''){
			if(!info){
				return null
			}
			
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>档案年度:{info.document.documentYear}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>公证事项:{info.document.notarialMatters}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>申请人:{info.document.applyName}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>收件日期:{moment(info.document.createdTime).format("YYYY-MM-DD")}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>公证日期:{moment(info.document.notarizationAt).format("YYYY-MM-DD")}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>保管日期:{info.document.storageLife}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>档案页数:{info.document.pageNumber}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>承办人:{info.document.contractorUserName}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>建档人:{info.document.createdUserName}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>公证号:{info.document.notaryNumber}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>档案类型:{info.document.documentType}</li>)

			if(info.document.application != undefined){
				applyList.push(<li style={{width:"50%",lineHeight:"40px"}}>{"创建人"}:{info.document.application.applicantName}</li>)
				applyList.push(<li style={{width:"50%",lineHeight:"40px"}}>{"创建时间"}:{moment(info.document.application.createdTime).format("YYYY-MM-DD HH:mm:ss")}</li>)
				applyList.push(<li style={{width:"50%",lineHeight:"40px"}}>{"审核人"}:{info.document.application.auditorName == '' ? '暂无':info.document.application.auditorName}</li>)
				applyList.push(<li style={{width:"50%",lineHeight:"40px"}}>{"审核人"}:
				{info.document.application.state == 0 ?
					<span style={{marginLeft:10}}><Badge status="processing" /><span>申请中</span></span>:
					info.document.application.state == 1 ?
					<span style={{marginLeft:10}}><Badge status="success" /><span>通过</span></span>:
					<span style={{marginLeft:10}}><Badge status="error" /><span>拒绝</span></span>
				}</li>)
				applyList.push(<li style={{width:"100%",lineHeight:"40px"}}>{"审核意见"}:{info.document.application.opinion}</li>)
			}
//			var menu = JSON.parse(details.document.basicInfo)
			var pages = info.document.documentBillList
//			for(let i=0;i<menu.length;i++){
//				list.push(<li key={i} style={{width:"50%",lineHeight:"40px"}}>{menu[i].name}:{menu[i].value}</li>)
//			}
			for(let i=0;i<pages.length;i++){
				photoPage.push(
					<div>
						<div style={{ display: "flex", justifyContent: "space-between", margin: "10px 20px", background: "#f4f4f4", lineHeight: "50px", borderRadius: 5 }}>
							<span style={{ marginLeft: 10,fontWeight:600 }}>{i + 1}.{pages[i].name} [{pages[i].billfileList.length}条]</span>
							<div style={{marginRight:10}}>
								<Button type="primary"
									onClick={this.bottonClick.bind(this, i)}
									style={{ border: "1px solid #DDDDDD", marginRight: 10, color: "black", backgroundImage: "linear-gradient(180deg,#fdfdfd 0%,#dddddd 98%)" }}>
									查看
								</Button>
							</div>
						</div>
						<div id={i} style={{ overflow: "scroll", height: "200px", margin: "0 40px", display: "none" }}>
							<div className="clearfix">
								{
									pages[i].billfileList.map((item,i)=>{
										return(
											<img onClick={this.imgClick} src={"http://file.sip.feelbang.com/files/" + item.url + "?token=" + sessionStorage.getItem("token") +"&"+ "sys=1001" } style={{ width: 80, margin: 5 }} />
										)
									})
								}
							</div>

						</div>
					</div>
				)	
			}
		}

    return (
      <div>
        <div style={{ marginBootm: 30 }}>
          <span style={{ fontSize: 20, marginLeft: 20, fontWeight: 600 }}>
            文档信息:
          </span>
          <br />
          <ul
            style={{
              display: "flex",
              flexWrap: "wrap",
              margin: "0 10px",
              marginLeft: 40
            }}
          >
            {list}
          </ul>
        </div>
        <div className="listLib">
          <span style={{ fontSize: 20, marginLeft: 20, fontWeight: 600 }}>
            资料清单:
          </span>
          <div>{photoPage}</div>
        </div>
        <Button
          style={{ width: 200, marginTop: 30, height: 40 }}
          type="primary"
          onClick={this.show.bind(this)}
        >
          返回
        </Button>
        <Modal
          visible={previewVisible}
          footer={null}
          onCancel={this.handleCancel}
        >
          <img alt="example" style={{ width: "100%" }} src={imgurl} />
        </Modal>
      </div>
    );
  }
}

export default Form.create()(ModalSelect);
